<template>
  <div class="commentItem">
    <div class="commentHeader">
      <div class="avatar">
        <img
          v-if="commentData.user.head_img"
          :src="$axios.defaults.baseURL + commentData.user.head_img"
          alt
        />
        <img v-else src="../../assets/134.jpg" alt />
      </div>
      <div class="info">
        <div class="name">{{ commentData.user.nickname }}</div>
        <div class="time">2小时前</div>
      </div>
      <div class="btnReply" @click="clickReply">回复</div>
    </div>
    <ParentComment v-if="commentData.parent" :parentdata="commentData.parent" />
    <div class="mainComment">{{ commentData.content }}</div>
  </div>
</template>

<script>
import eventBus from "../../utils/eventBus";
export default {
  props: ["commentData"],
  components: {
    ParentComment: () => import("./parentComment"),
  },
  methods: {
    clickReply() {
      console.log(eventBus);
      eventBus.$emit("replyComment", this.commentData.id);
    },
  },
};
</script>

<style lang="less" scoped>
.commentItem {
  padding: 10px;
  border-bottom: 1px solid #e4e4e4;
  .commentHeader {
    display: flex;
    margin-bottom: 10px;
    .avatar {
      width: 40/360 * 100vw;
      height: 40/360 * 100vw;
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
    .info {
      flex: 1;
      margin: 0 10px;
      .time {
        font-size: 14/360 * 100vw;
        color: #888;
      }
    }
    .btnReply {
      color: #999;
    }
  }
  .mainComment {
    margin: 10px 0;
    color: tomato;
  }
}
</style>